
<template>
  <div style="margin: 0;padding: 0">
    <el-container>
      <!--页面表头设计-->
      <el-header>返工返修作业指导书</el-header>
      <el-container>


        <el-aside width="200px">

          <UseTree :data1="TreeList" @TreeClick="TreeClick"></UseTree>


        </el-aside>
        <el-container>

          <!--主体设计-->
          <el-main>
            <!--左侧的工作步骤页面-->
            <el-tabs v-model="activeName" @tab-click="handleClick" style="height: 100%;margin: 0;padding: 0">
              <el-tab-pane label="PFMEA" name="first">PFEMEA</el-tab-pane>

              <el-tab-pane label="拆解步骤" name="second">
                <!--拆解步骤左侧的“拆解步骤”文字描述部分-->
                <div class="stepsStyle1">
                  <UseList @picturelist="fonPicturelist" :children-label="ChildrenLabel" :parent-label="parentLabel"></UseList>
                </div>
                <!--拆解步骤左侧的“拆解步骤”图片、录像展示部分-->
                <div class="stepsStyle2">
                  <VueImage :url="picturelist"></VueImage>
                </div>
              </el-tab-pane>
              <el-tab-pane label="失效分析" name="third">失效分析</el-tab-pane>
              <el-tab-pane label="检测标准" name="fourth">检测标准</el-tab-pane>
            </el-tabs>

          </el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>

  </div>
</template>

<script>
import UseList from "@/components/UseList.vue";
import VueImage from "@/components/VueImage.vue";
import UseTree from "@/components/UseTree.vue";
import axios from "axios";
export default {
  name: "RepairBook",
  components:{
    UseList,
    VueImage,
    UseTree,
  },

  data() {
    return {
      activeName: 'second',//步骤显示
      //主体左侧的工作步骤栏用到的数据
      tableData: [],
      TreeList:[],
      picturelist:["http://Localhost:8070/Server/Server/99143c4a-fbab-4fb9-b456-07e63553503a111777182028948.jpg",
        "http://Localhost:8070/Server/Server/5282034c-674a-425a-8b8e-1a257cf76aa20000366184.jpg",
        "http://Localhost:8070/Server/Server/e7e63b00-7352-4c2c-8ef0-61326c9ea4c70000366189.jpg",
        "http://Localhost:8070/Server/Server/4f5a082f-bac1-4e8f-990f-a658edf08700IPD考试二维码.jpg"],
      //点击导航栏，用到的变量
      ChildrenLabel:'',
      parentLabel:''
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //接收UseTree单击了导航栏后返回父组件的数据，用在根据导航栏筛选作业指导书的步骤，并显示在列表中。
    TreeClick(data,node){
      const parentNode=node.parent;
      this.ChildrenLabel=data.label;
      this.parentLabel=parentNode.label;
      console.log(this.ChildrenLabel);
      console.log("获得父节点的信息",this.parentLabel);
    },
    //点击Uselist某一行，返回子组件UseList返回图片数据
    fonPicturelist(data){
      this.picturelist=data;
      console.log("点击Uselist某一行，返回子组件UseList返回图片数据：",data)
    }
  },
  mounted() {
    axios({
      method:"post",
      url:"http://localhost:8080/TreeList"
    }).then(result=>{
      this.TreeList=result.data.data;
      console.log(this.TreeList)
    })
  }
}
</script>

<style scoped>
/* 主体左侧的工作步骤栏用到的数据包围的div的样式*/
.stepsStyle1{
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为虚线 */
  padding: 10px; /* 添加内边距 */
  width: 49%;/* 每个div占据一半的宽度 */
  height: 67vh;
  overflow: scroll;
  float: left; /* 让div浮动到左边 */
  box-sizing: border-box; /* 包括padding和border在width内 */
}
.stepsStyle2{
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为虚线 */
  padding: 10px; /* 添加内边距 */
  width: 49%;/* 每个div占据一半的宽度 */
  height: 67vh;
  overflow: scroll;
  float: right; /* 让div浮动到左边 */
  box-sizing: border-box; /* 包括padding和border在width内 */
}
.el-header{
  background-color: #B3C0D1;
  color: #ff0000;
  font-size: 35px;
  text-align: center;
  height: 10vh;
  line-height:8vh;
}

.el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  border-left-color: white;
  border-top: white;
}

.el-aside {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  height: 89vh;
}

.el-main {
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-left-color: white;
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>>